﻿<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">
<head>
	<meta charset="UTF-8">
	<meta name="google" content="notranslate" />
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
	<title>AIN BLOG —— 秘 境</title>
	<!--Main style css-->
	<link rel="stylesheet" th:href="@{/static/assets/css/style.css}">
	<!--Active Color css-->
	<link rel="stylesheet" th:href="@{/static/assets/css/colors/default-colors.css}">
	<!--Responsive style css-->
	<link rel="stylesheet" th:href="@{/static/assets/css/responsive.css}">
	<!-- JS -->
	<!--jQuery 1.12.4 google link-->
	<script th:src="@{/static/assets/js/jquery.min.js}"></script>
</head>
<body class="bodypadding">
	<!--快速返回顶层 Btn-->
	<div class="scroll_up gutengard_btn"><i class="icon-up-open-big"></i></div>
	<!--搜索框引入-->
	<div th:replace="../templates/commons/search::#main_search"></div>
	<!--侧边框引入-->
	<div th:replace="../templates/commons/floatBar::#main_floatBar"></div>
	<!--导航栏引入-->
	<div th:replace="../templates/commons/header::#main_header"></div>
	<!--分类页面主体-->
	<div class="category_header header_image box_overlay d-flex align_items_center justify_content_center" style="min-height: 250px;background-image: url(../assets/images/tagbg.jpg);background-repeat: no-repeat;background-position-y: 90%;">
		<h1 class="cat_title">[[${tagModel.tagName}]]</h1>
		<div style="position: absolute;top: 70%;color: #fff;font-size: 30px;font-family: Courier New;letter-spacing: 1px;">Subclass concrete tags</div>
	</div><!--END Category header-->
	<div style="padding: 20px;width: 100%;height: auto;background-color: #fff;border: 1px solid #e6e6e6">
		<p style="height: 40px;line-height: 40px;font-size: 20px;font-weight: 500;">描述：</p>
		<div style="text-indent: 2em">
			[[${tagModel.tagDescription}]]
		</div>

	</div>
	<div style="height: 50px"></div>

	<div class="page_container_wrapper">
		<div class="container-fluid no_padding">
			<div class="blog_list_post clearfix" >
				<!--第一行第一个-->
				<div class="blog_post_box clearfix" style="height: 400px;margin-right: 0.5%;margin-left: 0.5%;margin-bottom: 15px;width: 49%" th:each="articleModel:${articlesByTag}">
					<!--第一部分：相关文字-->
					<div class="blog_post_item" style="border: 1px solid #e6e6e6">
						<!--1.博文标题-->
						<h2 class="post_name" ><a style="font-size: 20px" th:href="${#httpServletRequest.contextPath}+'/single_sidebar'">[[${articleModel.articleTitle}]]</a>
						</h2>
						<div class="post_data">
							<!--2.留言人数-->
							<span class="comments_count"><i class="fas fa-comments"></i> [[${articleModel.commentCount}]]</span>
							<span class="reviews_count"><i class="fas fa-eye"></i> [[${articleModel.articleView}]]</span>
							<span class="reviews_count"><i class="iconfont icons-xihuan"
														   style="font-size: 14px;margin-left: 7px;margin-right: 7px;"></i>[[${articleModel.likeCount}]]</span>
						</div>
						<!--3.博文内容-->
						<div class="short_desc_post">
							<div class="short_desc_post_p1" id="content_p" th:utext="${articleModel.articleContent}"></div>
						</div>
						<div class="seea_more">
							<a th:href="${#httpServletRequest.contextPath}+'/single/'+${articleModel.articleId}">查看详情 <i
									class="icon-right-open-big"></i></a>
						</div>
					</div>
					<!--第二部分：封面图片-->
					<div class="blog_post_item_image" th:style="'background-image: url('+${articleModel.articleCover}+')'">
						<div class="post_data_cr">
							<span class="day" th:text="${articleModel.articleDate.substring(8,10)}"></span>
							<div class="month" th:text="${articleModel.articleDate.substring(5,7)}+'月'"></div>
							<div class="year" th:text="${articleModel.articleDate.substring(0,4)}"></div>
						</div>
						<a class="post_link_image"
						   th:href="${#httpServletRequest.contextPath}+'/single/'+${articleModel.articleId}">
							<img alt="" src="../assets/images/postimagebox.png">
						</a>
					</div>
				</div><!--END Post Box-->
			</div>
		</div>
	</div>


	<!--引入尾部-->
	<div th:replace="../templates/commons/footer::#main_footer"></div>
	

	<!--Bootstrap 4.1.0-->
	<script th:src="@{/static/assets/libs/bootstrap-4.1.0/bootstrap.min.js}"></script>
	<!--jquery.magnific-popup-->
	<script th:src="@{/static/assets/libs/jquery.magnific-popup/jquery.magnific-popup.min.js}"></script>
	<!--OWL Carousel-->
	<script th:src="@{/static/assets/libs/owlcarousel2-2.3.4/owl.carousel.min.js}"></script>
	<!--Custom js-->
	<script th:src="@{/static/assets/js/custom.js}"></script>

	
</body>
</html>